<template>
  <div class="app-container">
    <div class="search_container_warp">
      <el-form
        ref="queryFormRef"
        class="search_container"
        :model="queryParams"
        :inline="true"
      >
        <el-form-item prop="keywords" label="组别名称">
          <el-input
            v-model="queryParams.name"
            clearable
            @keyup.enter="queryFn"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="queryFn"
            ><i-ep-search />搜索</el-button
          >
          <el-button type="primary" @click="openDialog">新增组别</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-card shadow="never" class="table-container">
      <el-table
        ref="dataTableRef"
        class="customTableClass"
        v-loading="loading"
        :data="dataList"
        highlight-current-row
        border
      >
        <el-table-column label="序号" type="index" align="center" width="60" />
        <el-table-column label="组别名称" prop="name" min-width="120" />
        <el-table-column
          label="状态"
          prop="statusName"
          align="center"
          width="100"
        />
        <el-table-column
          label="创建人员"
          prop="createBy"
          align="center"
          width="120"
        />
        <el-table-column
          label="创建时间"
          prop="createDate"
          align="center"
          min-width="140"
        />
        <el-table-column label="操作" prop="code" align="center" width="120">
          <template #default="scope">
            <el-icon :size="16" class="editIconClass">
              <Edit @click="editFn(scope.row)" />
            </el-icon>
            <el-icon :size="16" class="deleteIconClass">
              <i-ep-delete @click="handleDelete(scope.row.id)" />
            </el-icon>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 修改状态弹窗 -->
    <el-dialog
      v-if="dialog.visible"
      v-model="dialog.visible"
      :title="dialog.title"
      width="600px"
      draggable
      align-center
      @close="closeDialog"
    >
      <el-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="组别名称" prop="name">
          <el-input v-model="formData.name" placeholder="" />
        </el-form-item>

        <el-form-item label="状态" prop="status">
          <el-select v-model="formData.status">
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="formData.remark" placeholder="" />
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeDialog">取 消</el-button>
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import {
  getDictionaryList,
  dictionaryCreate,
  dictionaryUpdate,
  dictionaryDelete,
} from "@/api/groupManagement";
import { ItemPageVO, Options } from "@/api/groupManagement/types";
import { queryFilter, computeHeiht } from "@/utils/index";
const router = useRouter();

defineOptions({
  name: "GroupManagement",
  inheritAttrs: false,
});
const queryFormRef = ref(ElForm);
const formRef = ref(ElForm);
const dataList = ref<ItemPageVO[]>([]);
const originaldataList = ref<ItemPageVO[]>([]);
const formData = reactive<ItemPageVO>({});
const statusOptions = ref<Options[]>([]);
const loading = ref(false);

const queryParams = reactive<ItemPageVO>({});

const rules = reactive({
  name: [{ required: true, message: " ", trigger: "change" }],
  status: [{ required: true, message: " ", trigger: "change" }],
});

statusOptions.value = [
  {
    label: "未审核",
    value: 0,
  },
  {
    label: "已审核",
    value: 1,
  },
];

const dialog = reactive({
  title: "新增组别",
  visible: false,
});

/** 查询 */
function queryFn() {
  let { name } = queryParams;
  let arr: Options[] = [{ label: "name", value: name || "" }];
  if (name) {
    dataList.value = queryFilter(originaldataList.value, arr);
  } else {
    handleQuery();
  }
}

/** 查询 */
function handleQuery() {
  loading.value = true;
  getDictionaryList({ type: "MATCH_GROUP" })
    .then(({ data }) => {
      data.forEach((v) => {
        v.statusName = statusOptions.value.find(
          (j) => j.value === v.status
        )?.label;
      });
      dataList.value = data;
      originaldataList.value = data;
    })
    .finally(() => {
      loading.value = false;
    });
}
/** 重置查询 */
function resetQuery() {
  queryFormRef.value.resetFields();
  handleQuery();
}

function openDialog() {
  dialog.visible = true;
  formData.id = undefined;
  formData.name = "";
  formData.status = "";
  formData.remark = "";
}
/** open表单弹窗 */
function editFn(data: ItemPageVO) {
  dialog.visible = true;
  formData.id = data.id;
  formData.name = data.name;
  formData.status = data.status;
  formData.remark = data.remark;
}

/** 删除赛队人员 */
function handleDelete(id?: any) {
  ElMessageBox.confirm("确认删除数据项?", "确认删除", {
    confirmButtonText: "确 定",
    cancelButtonText: "取 消",
    type: "error",
  }).then(() => {
    loading.value = true;
    dictionaryDelete(id)
      .then(() => {
        ElMessage.success("删除成功");
        resetQuery();
      })
      .finally(() => (loading.value = false));
  });
}

function handleSubmit() {
  formRef.value.validate((valid: boolean) => {
    if (valid) {
      if (formData.id) {
        dictionaryUpdate(formData).then((res) => {
          ElMessage.success("修改成功");
          dialog.visible = false;
          handleQuery();
        });
      } else {
        dictionaryCreate(formData).then((res) => {
          ElMessage.success("新增成功");
          dialog.visible = false;
          handleQuery();
        });
      }
    }
  });
}
function closeDialog() {
  dialog.visible = false;
}

onMounted(() => {
  handleQuery();
  computeHeiht();
});
</script>
